
<template>
  <div>
    <div class="bg_video">
      <video muted autoplay="autoplay" loop="loop" src="../assets/video/home-bg.31c7659b.mp4"></video>
    </div>
    <div class="header">
      <olp-header-menu></olp-header-menu>
    </div>

    <div class="body">
      <div class="pepole">
        <el-descriptions title="个人信息" style="width: 500px;">
          <el-descriptions-item label="姓名">{{ idform.name }}</el-descriptions-item>
          <el-descriptions-item label="性别">{{ idform.sex }}</el-descriptions-item>
          <el-descriptions-item label="工号">{{ idform.id }}</el-descriptions-item>
          <el-descriptions-item label="密码">
            <!-- {{ idform.password }}&#12288; -->
            <el-button text @click="open" type="primary" plain>修改密码</el-button></el-descriptions-item>
          <el-descriptions-item label="角色">
            <el-tag size="small">{{ idform.role }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所属部门">{{ idform.department }}</el-descriptions-item>
          <el-descriptions-item label="工号状态">{{ idform.status }}</el-descriptions-item>
        </el-descriptions>

      </div>

      <div class="table">

        <el-descriptions title="工号管理"></el-descriptions>
        <el-button text @click="dialogFormVisible = true" type="primary" plain class="btn"
          :disabled="ifauth.newuser">新增工号</el-button>
        <el-button text @click="allid()" type="primary" plain class="btn">显示全部工号</el-button>
        <el-button text @click="trueid()" type="primary" plain class="btn">显示有效工号</el-button><br>
        <el-table :data="tableData" border style="width: 500px;margin-top: 20px;" height="300">
          <el-table-column prop="id" label="工号" width="200">
          </el-table-column>
          <!-- <el-table-column prop="name" label="姓名" width="90">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="70">
          </el-table-column>
          <el-table-column prop="role" label="角色">
          </el-table-column> -->
          <el-table-column prop="status" label="工号状态" width="90">
          </el-table-column>
          <el-table-column prop="play" label='操作'>
            <template v-slot="scope">
              <el-button type="primary" round @click="scope.row.dialogFormVisible = true; oldid = scope.row.id"
                :disabled="ifauth.altuser || scope.row.authLevel == '-1' || scope.row.id == idform.id">修改</el-button>
              <el-button type="danger" round @click="delect(scope.row.id)"
                :disabled="ifauth.deluser || scope.row.authLevel == '-1' || scope.row.id == idform.id">删除</el-button>

              <el-dialog v-model="scope.row.dialogFormVisible" title="修改信息" :append-to-body="true"
                :modal-append-to-body="false">
                <el-form :model="scope.row.dialogFormVisible">
                  <el-form-item label="工号" :label-width="formLabelWidth">
                    <el-input v-model="scope.row.id" autocomplete="off" />
                  </el-form-item>
                  <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="scope.row.password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="工号状态" :label-width="formLabelWidth">
                    <el-select v-model="scope.row.status" placeholder="请选择工号状态">
                      <el-option label="有效" value="有效" />
                      <el-option label="无效" value="无效" />
                    </el-select>
                  </el-form-item>
                </el-form>
                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="scope.row.dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="scope.row.dialogFormVisible = false;
                    AltId(oldid, scope.row.id, scope.row.password, scope.row.status)">
                      确定
                    </el-button>
                  </span>
                </template>
              </el-dialog>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-dialog v-model="dialogFormVisible" title="添加员工">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色" :label-width="formLabelWidth">
            <el-select v-model="form.role" placeholder="请选择管理角色">
              <el-option label="管理员" value="管理员" />
              <el-option label="员工" value="员工" />
            </el-select>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="form.sex" placeholder="请选择性别">
              <el-option label="男" value="男" />
              <el-option label="女" value="女" />
            </el-select>
          </el-form-item>
          <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="form.department" placeholder="请选择所属部门">
              <el-option label="信息部" value="信息部" />
              <el-option label="人工部" value="人工部" />
              <el-option label="开发部" value="开发部" />
              <el-option label="财务部" value="财务部" />
            </el-select>
          </el-form-item>
          <el-form-item label="工号状态" :label-width="formLabelWidth">
            <el-select v-model="form.status" placeholder="请选择工号状态">
              <el-option label="有效" value="有效" />
              <el-option label="无效" value="无效" />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false;
            AddId(form.name, form.role, form.department, form.status, form.sex)">
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import OlpHeaderMenu from '../components/base/OlpHeaderMenu/OlpHeaderMenu.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref } from 'vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SecurityAPI from '.././api/security/index'


const router = useRouter()
onMounted(() => {

  if (localStorage.getItem('token') == `""` || localStorage.getItem('token') == null) {
    router.push('/')
  }

  SecurityAPI.Id.IdAPI.queryById(JSON.parse(localStorage.getItem('token')).staffId
  ).then(res => {
    console.log("用户数据" + JSON.parse(localStorage.getItem('token')).staffId
    )
    console.log(res)
    idform.name = res.data.name;
    idform.sex = res.data.sex;
    idform.id = res.data.staffId;
    idform.password = res.data.password;
    // idform.role = tablerole(JSON.parse(localStorage.getItem('token')).roles[0].roleId);
    idform.department = res.data.departmentName;
    idform.status = JSON.parse(localStorage.getItem('token')).status;
    SecurityAPI.Permisson.PermissonAPI.openById(idform.id).then(res => {
      console.log(res)
      idform.role = res.data[0].roleName
      ifauth.newuser = !(res.data[0].authList.indexOf("新增员工") !== -1)
      ifauth.altuser = !(res.data[0].authList.indexOf("修改信息") !== -1)
      ifauth.deluser = !(res.data[0].authList.indexOf("删除员工") !== -1)
      ifauth.roleid = tablerole(res.data[0].roleName)
    })
  })




  SecurityAPI.Id.IdAPI.queryAll().then(res => {
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
    }
    console.log(tableData)
  })
}
)

const tableData = reactive([])

const idform = reactive({
})
const ifauth = reactive({
})
const dialogFormVisible = ref(false)
const form = reactive({
})
const oldid = ""
var result = ""
const tablerole = (type) => {
  switch (type) {
    case '系统管理员':
      result = '1';
      break;
    case '管理员':
      result = '0'
      break;
    case '员工':
      result = '-1'
      break;
  }
  return result
}

const pan = (data1, data2) => {
  console.log(data1, data2)
  if (data2 = null) {
    return false
  } if (data1 > data2) {
    return false
  } else {
    return true
  }
}

const open = () => {
  ElMessageBox.prompt('请输入您的新密码', '修改密码', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern:
      /(?!.*\s)(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{10,20}$/,
    inputErrorMessage: '密码为包含数字和字母的至少10位数的字符串',
  })
    .then(({ value }) => {

      ElMessage({
        type: 'success',
        message: `您的新密码是:${value}`,
      })
      AltPassword(JSON.parse(localStorage.getItem('token')).staffId, value)
    })
  // .catch(() => {
  //   ElMessage({
  //     type: 'info',
  //     message: '取消修改',
  //   })
  // })
}

const delect = (id) => {
  ElMessageBox.confirm(
    '您确定要删除吗?',
    '删除工号',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      DelectId(id)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const allid = () => {
  SecurityAPI.Id.IdAPI.queryAll().then(res => {
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
    }
    console.log(tableData)
  })
}

const trueid = () => {
  SecurityAPI.Id.IdAPI.queryTrue().then(res => {
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i];
    }
    console.log(tableData)
  })
}

const AltPassword = (id, password) => {
  SecurityAPI.Id.IdAPI.altPassword(id, password).then(res => {
    console.log("修改密码" + id + password)
    console.log(res)
  })
}


const DelectId = (id) => {
  SecurityAPI.Id.IdAPI.delectId(id).then(res => {
    console.log("删除工号" + id)
    console.log(res)
  })
}

const AddId = (name, role, department, status, sex) => {
  const userinfo = reactive({
    "name": '',
    'deName': '',
    'roleName': '',
    'status': '',
    'sex': '',
  })
  userinfo.name = name
  userinfo.deName = department
  userinfo.roleName = role
  userinfo.status = status
  userinfo.sex = sex
  console.log(userinfo)
  SecurityAPI.Id.IdAPI.addId(userinfo).then(res => {
    console.log("新增工号" + userinfo)
    console.log(res)
  })
}

const AltId = (oldid, newid, password, status) => {
  if (password != null) {
    SecurityAPI.Id.IdAPI.altPassword(oldid, password).then(res => {
      console.log("修改密码" + oldid + password)
      console.log(res)
    })
  }
  // var result = ""
  // switch (status) {
  //   case 'status1':
  //     result = '有效';
  //     break;
  //   case 'status2':
  //     result = '无效'
  //     break;
  // }
  // console.log(result)
  SecurityAPI.Id.IdAPI.altStatus(oldid, status).then(res => {
    console.log("修改状态" + oldid + status)
    console.log(res)
  })

  if (newid != oldid) {
    var nid = newid.slice(8)
    SecurityAPI.Id.IdAPI.altId(oldid, nid).then(res => {
      console.log("修改工号" + oldid + nid)
      console.log(res)
    })
  }
}
</script>

<style lang="scss" scoped>
.pepole {
  padding-left: 30px;
  padding-bottom: 40px;
  padding-top: 50px;
}

.table {
  padding-left: 30px;
}

.btn {
  float: left;
}

.bg_video {
  position: absolute;
  z-index: -1;
  width: 100%;

  video {
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
    object-fit: cover;
    outline: none !important;
    mix-blend-mode: darken;
    width: 100vw;
    height: 99.81vh;
  }
}
</style>